<%--
  Created by IntelliJ IDEA.
  User: Jason
  Date: 2016/9/7
  Time: 19:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>控制面板</title>
    <style>
        .ruleContent {
            width: 100%;
            height: 100%;
            border: 1px solid #e4e4e4;
            padding: 10px;
            outline: none;
        }

        .control {
            width: 100%;
            height: 68px;
        }

        .left {
            float: left;
            width: 70%;
            height: calc(100% - 88px);
        }

        .right {
            width: 30%;
            float: left;
            height: calc(100% - 88px);
            padding-left: 20px;
        }

        .btn-remove {
            position: absolute;
            right: 20px;
        }

        .btn-edit {
            position: absolute;
            right: 60px;
        }

        .jsContent {
            width: 100%;
            height: 600px;
            border: 1px solid #CCCCCC;
            outline: none;
            padding: 10px;
        }
    </style>
</head>
<body>
<jsp:include page="../basic/include.jsp"></jsp:include>
<jsp:include page="../basic/top.jsp"></jsp:include>
<jsp:include page="../basic/left.jsp"></jsp:include>

<div class="body-container">
    <div class="control well">
        <button class="btn btn-primary btn-save">保存</button>
        <button class="btn btn-info" data-toggle="modal" data-target=".bs-example-modal-lg">新建Js</button>
        <a class="btn btn-success btn-publish" href="user_update_version.do">当前版本:【${version}】发布新版</a>
    </div>


    <div class="left">
        <form id="rule-form" action="user_rule_submit.do" method="post">
            <textarea name="rule" class="ruleContent">${rule}</textarea>
        </form>
    </div>

    <div class="right">
        <ul class="list-group">
            <c:forEach items="${jsList}" var="li">
                <li class="list-group-item" js-id="${li.jsId}" js-name="${li.jsUrl}" js-content="${li.jsContent}">${li.jsUrl}
                    <button class="btn btn-xs btn-info btn-edit" data-toggle="modal" data-target=".bs-example-modal-lg">编辑</button>
                    <a class="btn btn-xs btn-danger btn-remove" href="user_del_js.do?jsId=${li.jsId}">删除</a>
                </li>
            </c:forEach>
        </ul>
    </div>


    <!-- Large modal -->
    <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">

            <div class="modal-content" style="padding:20px;padding-bottom: 0;">
                <form class="jsForm" action="user_add_js.do" method="post">
                    <input id="inp-js-id" type="hidden" name="jsId"/>
                    <div class="input-group">
                        <span class="input-group-addon">名称</span>
                        <input id="inp-js-name" name="jsName" type="text" class="form-control" placeholder="jsUrl">
                    </div>
                    <br>
                    <div class="input-group">
                        <span class="input-group-addon">内容</span>
                        <textarea id="inp-js-content" name="jsContent" class="jsContent"></textarea>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">修改</button>
                    </div>
                </form>
            </div>

        </div>
    </div>


    <script>

        $(function () {

            $(".btn-edit").click(function () {

                var inp_JsId = $("#inp-js-id");
                var inp_JsName = $("#inp-js-name");
                var inp_JsContent = $("#inp-js-content");

                var jsId = $(this).parent().attr("js-id");
                var jsName = $(this).parent().attr("js-name");
                var jsContent = $(this).parent().attr("js-content");

                $(inp_JsId).val(jsId);
                $(inp_JsName).val(jsName);
                $(inp_JsContent).val(jsContent);
            });

            $(".btn-remove").click(function () {

                var t = confirm("确认删除?");

                return t;

            });

            $(".btn-save").click(function () {

                var form = $("#rule-form");
                $(form).submit();

            });


        });

    </script>


</div>
</body>
</html>
